<template>
    <div class="big-box">
        <header class="title">
            <h2>图书馆数字可视化大屏</h2>
        </header>
        <section class="box" @click="goShowData()">
            <section class="left" @click="goShowData()">
                <page1 class="title1">
                    藏馆与读者总量
                    <one></one>
                </page1>
                <page1 class="title1">
                    2021年图书馆人流量数据
                    <two></two>
                </page1>
            </section>
            <section class="right">
                <page1 class="title1">
                    馆内座位预约数据
                    <three></three>
                </page1>
                <page1 class="title1">
                    图书流通
                    <four></four>
                    
                </page1>
            </section>
            
        </section>
    </div>
    </template>
    
    <script>
    import page1 from "@/components/slot1.vue"  
    import one from "@/components/one.vue"  
    import two from "@/components/two.vue"  
    import three from "@/components/three.vue"  
    import four from "@/components/four.vue"  

    import {inject} from "vue"
    export default {
        components:{
            page1,
            one,
            two,
            three,
            four

           
        },
        setup(){
            let $echarts =inject("echarts")
            console.log($echarts)
        },
        methods:{
            goShowData(){
                this.$router.push('/')
            }
            
        }
    
    }
    </script>
    
    <style lang="less">
    
        header{
        height: 1.2rem;
        width: 100%;
        // background-color:rgba(0,0,250,0.2);
        background: url("../assets/可视化/title.png");
        h2{
        font-size: 0.6rem;
        color: aliceblue;
        text-align: center;
        line-height: 1.2rem;
    }
    }
    .box{
        min-width: 1200px;
        max-width: 2560px;
        margin: 0 auto;
        padding: .125rem .125rem 0;
        display: flex;
    .left,.right{
        flex: 3.1;
    } 
    .title1{
        text-align: center;
        font-size: 22px;
        color: aliceblue;
    }
    }
    
    
    
    
    </style>